<% include ./side.html %>
<style scoped>
	.com_top_title:after {
		content: '';
		display: block;
		clear: both;
	}

	table.table {
		background: #fff;
	}

	table.table .light_color th {
		font-weight: 400;
	}

	table.table tr td {
		font-size: 12px;
	}

	.common-block-style {
		background: #fff;
	}

	.common-block-style .h1 {
		font-size: 18px;
		margin-bottom: 25px;
		padding-bottom: 10px;
		border-bottom: solid 1px #eee;
	}

	.common-block-style .block {
		margin-bottom: 15px;
		font-size: 16px;
		overflow: hidden;
	}

	.common-block-style .block span {
		display: block;
		float: left;
	}

	.common-block-style .block .t1 {
		width: 120px;
	}

	.common-block-style .block .t2 {
		max-width: 1200px;
	}
</style>
<div class="com_content_body main pb100" id="pages" v-cloak>
	<div class="com_top_title">
		<h1 class="com_h1 fl">PATH 路径详情信息</h1>
		<commonsearch></commonsearch>
	</div>
	<div class="com_block common-block-style mt20">
		<div class="block">
			<span class="t1">PATH路径:</span>
			<span class="t2">{{datas.path}}</span>
		</div>
		<div class="block">
			<span class="t1">网络类型:</span>
			<span class="t2">{{datas.net}}</span>
		</div>
		<div class="block">
			<span class="t1">IP:</span>
			<span class="t2">{{datas.ip}}</span>
		</div>
		<div class="block">
			<span class="t1">所属城市:</span>
			<span class="t2">{{datas.city||'未知'}}</span>
		</div>
		<div class="block">
			<span class="t1">手机品牌:</span>
			<span class="t2">{{datas.brand}}</span>
		</div>
		<div class="block">
			<span class="t1">手机类型:</span>
			<span class="t2">{{datas.model}}</span>
		</div>
		<div class="block">
			<span class="t1">微信版本:</span>
			<span class="t2">{{datas.version}}</span>
		</div>
		<div class="block">
			<span class="t1">微信语言:</span>
			<span class="t2">{{datas.language}}</span>
		</div>
		<div class="block">
			<span class="t1">手机系统版本:</span>
			<span class="t2">{{datas.system}}</span>
		</div>
		<div class="block">
			<span class="t1">SDK版本:</span>
			<span class="t2">{{datas.SDKVersion}}</span>
		</div>
		<div class="block">
			<span class="t1">屏幕宽度:</span>
			<span class="t2">{{datas.screenWidth}}</span>
		</div>
		<div class="block">
			<span class="t1">屏幕高度:</span>
			<span class="t2">{{datas.screenHeight}}</span>
		</div>
		<div class="block">
			<span class="t1">生成时间:</span>
			<span class="t2">{{datas.create_time|date('/',true)}}</span>
		</div>
		<div class="block">
			<span class="t1">访问轨迹:</span>
			<span class="t2"><a :href="'/wx/analysisdetail?markuser='+datas.mark_user">查看用户访问轨迹详情</a></span>
		</div>
	</div>
</div>

<script>
	new Vue({
		el: '#pages',
		data: function () {
			return {
				datas: {},
				appId: util.getStorage('local', 'appId'),
				id: util.getQueryString('id') || '',
			}
		},
		filters: {
			toFixed: window.Filter.toFixed,
			toSize: window.Filter.toSize,
			date: window.Filter.date,
		},
		mounted() {
			this.getOneAjaxDetail();
		},
		methods: {
			getOneAjaxDetail() {
				this.isLoadend = false;
				util.ajax({
					type: 'get',
					url: config.baseApi + 'api/v1/wx/pages/getPageDetails',
					data: {
						appId: this.appId,
						id: this.id,
					},
					success: data => {
						this.isLoadend = true;
						this.datas = data.data;
					}
				})
			},
		}
	})
</script>